var VS_SHADER_RESOURCE = 
    'attribute vec4 a_Position;\n'+
    'attribute vec2 a_TexCoord;\n'+
    'varying vec2 v_TexCoord;\n'+
    'void main(){\n'+
    '   gl_Position = a_Position;\n'+
    '   v_TexCoord = a_TexCoord;\n'+
    '}\n';

var FS_SHADER_RESOURCE = 
    'precision mediump float;\n'+
    'varying vec2 v_TexCoord;\n'+
    'uniform sampler2D u_Sampler;\n'+
    'void main(){\n'+
    '   gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n'+
    '}';

function main(){
    var canvas = document.getElementById("canvas_id");
    var gl = getWebGLContext(canvas);
    if(! gl) return console.error("not find gl");
    if(!initShaders(gl, VS_SHADER_RESOURCE, FS_SHADER_RESOURCE)){
        return console.error("init shader faill");
    }
    initShaderBuffers(gl);
    drawTexture(gl);
}

function initShaderBuffers(gl) {
    var vertexBuffer = gl.createBuffer();
    var coordBuffer = gl.createBuffer();
    if(! vertexBuffer || ! coordBuffer){
        return console.error("create shader buffer fail !!");
    }
    var bufferArray = new Float32Array(
        [
            -0.5,0.5,   0.0,0.2,
            -0.5,-0.5,  0.0,0.0,
            0.5,0.5,    0.2,0.2,
            0.5,-0.5,   0.2,0.0
        ]
    );
    var a_Position = gl.getAttribLocation(gl.program, "a_Position");
    var a_TexCoord = gl.getAttribLocation(gl.program, "a_TexCoord");
    var size = bufferArray.BYTES_PER_ELEMENT;
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, bufferArray, gl.STATIC_DRAW);

    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, size*4, 0);
    gl.enableVertexAttribArray(a_Position);

    gl.bindBuffer(gl.ARRAY_BUFFER, coordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, bufferArray, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false , size*4, size*2);
    gl.enableVertexAttribArray(a_TexCoord);
}

function drawTexture(gl){
    var tex = gl.createTexture();// 创建纹理对象
    var img = new Image();
    var u_Sampler = gl.getUniformLocation(gl.program, "u_Sampler");

    img.onload = function loadImg() {
        loadTexture(gl,tex, u_Sampler, img); // 坑
    }
    // img.crossOrigin ="anonymous";
    img.src = "../res/img/bizidis.jpg"
    // img.src = "../res/img/meinv.jpg"
    // document.body.appendChild(img); // 测试在网页上能加载出来
    /**
     * WebGL中纹理的限制
    WebGL中的纹理需要注意一点，所使用的图片数据的大小必须是2的阶乘，横竖的像素长度大小必须是32x32，128x128等2的阶乘的形式。
    当然，做一些处理的话，不是2的阶乘的图片数据也是可以用的，但是基本上作为纹理使用的图像数据的大小必须是2的阶乘。
     */
}   

function loadTexture(gl,tex, u_Sampler, img){
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); //对纹理图像进行y轴反转
    // 开启0号单元纹理
    gl.activeTexture(gl.TEXTURE0);
    //向target绑定纹理对象
    gl.bindTexture(gl.TEXTURE_2D, tex);
    
    // 配置纹理参数
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    // 配置纹理图像
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_SHORT_5_6_5, img);
    // 将0号纹理传给着色器
    gl.uniform1i(u_Sampler, 0);
    gl.clearColor(0.0,0.0,0.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}